<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="/assets/plug/layui-v2.4.3/layui/css/layui.css">
    <title>公司基本信息</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }
        .company {
            width: 1000px;
            height: 382px;
            border: 1px solid grey;
            margin-top: 20px;
        }
      .company_info {
          text-align: center;
          height: 50px;
          background-color: rgb(24, 188, 156);
      }
        .company_info h2 {
            margin: 0;
            padding: 0;
            line-height:50px;
            color: #fff;
        }
        .company_box {
            margin-top: 40px;
            border:1px solid grey;
        }
        .company_name {
            font-size: 22px;
            color: #fff;
            font-weight: 600;
        }
        .company_logo {
            margin-top: 40px;
            margin-left: 102px;
            width: 200px;
            height: 200px;
            float: left;

        }
        .company_logo img {
            width: 200px;
            height: 200px;
            border: 1px solid #1daeff;
        }
        .company_box {
            float: left;
            margin-left: 10px;
            padding-left: 10px;
            padding-right: 10px;
        }

        .first_box, .second_box, .third_box, .four_box, .five_box {
            width: 100%;
            height: 30px;
            line-height: 30px;
            margin-top: 7px;
        }
        .first_box>div, .second_box>div, .third_box>div,  .four_box>div, .five_box>div{
            float: left;
            font-size: 13px;
        }
        .first_box div:nth-child(2), .second_box div:nth-child(2),.five_box div:nth-child(2), .third_box div:nth-child(2),  .four_box div:nth-child(2) {
            margin-left: 50px;
        }
        .first_box span, .second_box span, .third_box span, .four_box span, .five_box span {
            font-size: 14px;
            color: #000;
            font-family: sans-serif;
        }
        .company_logo span {
            display: block;
            text-align: center;
            margin-top: 5px;
            font-size: 15px;
            color: #fff;
            font-weight: 600;
        }
        .company_content_box {
            border: 2px solid rgb(24, 188, 156);
            width: 890px;
            height: 300px;
            margin-left: 50px;
            background-color: grey;
            box-shadow: 0 5px 2px rgba(128, 72, 63, 0.77);
        }
        .company_remark span:nth-child(2) {
            color: red;
        }
        .readMore {
            font-style: normal;
            color: white;
            font-size: 11px;
        }
    </style>
</head>
<body>
    <div class="company">
        <div class="company_info"><h2>公司基本信息</h2></div>
        <div class="company_content_box">
            <div class="company_logo">
                <img src="{$companyinfo.company_logo}" alt="">
                <span>[ Logo ]</span>
            </div>
            <div class="company_box">
                <div class="company_name">
                    <span id="company_name">{$companyinfo.company_name}</span>
                </div>
                <div class="first_box">
                    <div class="company_remark">
                        <span>公司标识：</span>
                        <span>{$companyinfo.company_remark}</span>
                    </div>
                    <div class="company_url">
                        <span>官网地址：</span>
                        <span>{$companyinfo.legalurl}</span>
                    </div>

                </div>
                <div class="second_box">
                    <div class="company_connect">
                        <span>邮箱：</span>
                        <span>{$companyinfo.connect_method}</span>
                    </div>
                    <div class="company_address">
                        <span>公司地址：</span>
                        <span>{$companyinfo.company_address}</span>
                    </div>
                </div>
                <div class="third_box">
                    <div class="company_category">
                        <span>行业分类：</span>
                        <span>{$companyinfo.industry_category}</span>
                    </div>
                    <div class="company_connect">
                        <span>联系方式：</span>
                        <span>{$companyinfo.connect_method}</span>
                    </div>
                </div>
                <div class="four_box">
                    <div class="company_time">
                        <span>套餐起止日期：</span>
                        <span>{$companyinfo.start_time|date='Y-m-d',###}--{$companyinfo.end_time|date='Y-m-d',###}</span>
                    </div>
                </div>
                <div class="five_box">
                    <div class="company_jianjie">
                        <span>公司简介：</span>
                        {if condition="$length gt 25"}
                            <span>{$companyinfo.construction|mb_substr=###,0,25,'utf8'}...<i class="readMore">&nbsp;&nbsp;查看更多</i></span>
                        {else /}
                            <span>{$companyinfo.construction}</span>
                        {/if}
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script src="/assets/js/jquery-3.3.1.min.js" type="text/javascript"></script>
<script src="/assets/plug/layui-v2.4.3/layui/layui.js"></script>
<script src="/assets/js/jquery.color.js"></script>
<script type="text/javascript">

    $(function() {
        //查看更多
        $('.readMore').click(function () {
            layui.use('layer', function () {
                var layer = layui.layer;
                layer.open({
                    type: 1,
                    anim: 1,
                    title: '公司简介',
                    area: ['600px', '400px'],
                    content: '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{$companyinfo.construction}'
                });
            });
        })

        $('#company_name').animate({'paddingLeft': '150px', 'color': 'yellow'}, 5000).animate({'paddingLeft': '0px', 'color': 'white'}, 5000);
        setInterval(function () {
            $('#company_name').animate({'paddingLeft': '150px', 'color': 'blue'}, 5000).animate({'paddingLeft': '0px',  'color': 'white'}, 5000);
        },10000)
    });
</script>
</html>